<template>
	<view>
		<view>
			<view class="canvas">
				<view class="chicken" @tap.stop="$util.redirectTo('/otherpages/games/chicken')">
					<image src="/static/chicken/min.png"></image>
				</view>
				<view class="cloud">
					<view class="fly-1">
						<image src="/static/watering/fly-1.png"></image>
					</view>
					<view class="fly-2">
						<image src="/static/watering/fly-2.png"></image>
					</view>
					<view class="fly-3">
						<image src="/static/watering/fly-3.png"></image>
					</view>
				</view>
				<view class="tree">
					<view style="position:absolute;left:0;top:0;right:0;">
						<view @tap.stop="receiveAward(index,item)" class="energy" :class="[item.hide ? 'energyhide' : '']" :style="item.pos" v-for="(item,index) in cloudBall" :key="index">
							<image class="ball" src="/static/watering/green.png"></image>
							<text class="green-txt">{{item.number}}</text>
							<text class="green-info">{{item.info}}</text>
						</view>
					</view>
					<image :src="'/static/watering/tree-'+ mupiao +'.png'" :class="['tree-'+ mupiao, treemove ? 'move-'+ mupiao : '']" hover-class="none" @click="tree"></image>
				</view>

				<view class="sumup">
					<view class="user">
						<view class="cover">
							<image :src="userHeadimg" hover-class="none"></image>
						</view>
						<view class="info">
							<view class="name">
								<text class="name" v-text="userInfo.nickname"></text>
								<image class="is-real" v-if="userInfo.realname" src="/static/img/is_real.png"></image>
							</view>
							<view class="drop" hover-class="none">
								<text v-text="userInfo.red_point + ' 红积分'"></text>
								<view class="icon">
									<text class="plus" :class="{'pluss': pluss}">+{{plusNum}}</text> 
								</view>
							</view>
						</view>
					</view>
					<view class="speed" v-if="friend_id > 0">
						<image class="kettls" @click="wateringNext" src="/static/watering/kettls.png" mode="aspectFit"></image>
						<image class="flasks" :class="{'water': watercss}" src="/static/watering/flasks.png" v-show="watercss"></image>
						<image class="flasms" @click="wateringNext" src="/static/watering/flasms.png" v-show="!watercss"></image>
						<image class="waters" src="/static/watering/waters.gif" v-show="waterdom"></image>
					</view>
				</view>
			</view>
		</view>
		<nsGoodsRecommend ref="goodrecommend"></nsGoodsRecommend>
	</view>
</template>

<script>
	import nsGoodsRecommend from '@/components/ns-goods-recommend/ns-goods-recommend.vue';
	// 浮动位置
	let CLOUDPOSITION = [
		[{
				css: 'left:195rpx; top:-260rpx'
			},
		],
		[{
				css: 'left:335rpx; top:-310rpx'
			},
		],
		[{
				css: 'right:132rpx; top:-213rpx'
			},
		],
		[{
				css: 'left:112rpx; top:-150rpx'
			},
		],
		[{
				css: 'right:52rpx; top:-127rpx'
			},
		],
		[{
				css: 'right:10rpx; top:300rpx'
			},
		],
	]
	export default {
		components: {
			nsGoodsRecommend
		},
		data() {
			return {
				windowHeight: this.windowHeight,
				cloudBall: [],
				userHeadimg: '/static/img/logo.png',
				friend_id: 0,
				userInfo: [],
				plusNum: 1,
				pluss: false,		//+1动画
				mupiao: 1,			//成长进度 小1，中2 ，大3
				movetree: true,		//树动画开关
				treemove: false,	//树大小类型
				wateroff: true, 	//浇水动画开关
				watercss: false,	//水壶动画开关
				waterdom: false		//水滴动画开关
			};
		},
		onLoad() {
			// #ifdef APP-PLUS
			plus.nativeUI.showWaiting('加载中……');
			// #endif
		},
		onShow() {
			if(!uni.getStorageSync('token')){
				uni.navigateBack({
				    delta: 1
				});
			}
			this.retrievalData();
		},
		onReady() {
			// #ifdef APP-PLUS
			plus.nativeUI.closeWaiting();
			// #endif
		},
		watch:{
			'userInfo.red_point': {
				handler(val) {
					if(this.userInfo.red_point >= 3000) {
						this.mupiao = 3;
					}else if(this.userInfo.red_point >= 1000  && this.userInfo.red_point < 3000) {
						this.mupiao = 2;
					}else{
						this.mupiao = 1;
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			viewFriend(id){
				this.friend_id = id
				this.retrievalData()
				this.tree()
			},
			setPosition(arr) {
				if (arr.length === 0) {
					return []
				}
				let res = []
				for (let i = 0; i < arr.length; i++) {
					let cur = arr[i]
					// 6个区域位置的一个
					let posArr = CLOUDPOSITION[i]
					// 区域位置的3个位置随机一个
					let randomPos = posArr[Math.floor((Math.random() * posArr.length))]
					cur = Object.assign({}, cur, {
						pos: randomPos.css
					})
					res.push(cur)
				}
				return res
			},
			async receiveAward(index, item) {
				//console.log(index, item)
				var self = this
				this.$api.sendRequest({
					url: '/api/Watering/wateringReceiveAward',
					data: {
						id: item.id
					},
					success: res => {
						if (res.code == 0) {
							item.hide = true
							self.cloudBall.splice(index, 1, item)
							if(item.type == 1){
								self.plusNum = item.number
								self.pluss = true;
								setTimeout(() => {
									self.pluss = false;
								}, 2000);
								self.userInfo.red_point = self.userInfo.red_point+item.number
							}
						}
					}
				});
			},
			async wateringNext() {
				if(this.wateroff) {
					var self = this
					let res = await huicheng.wateringNext({
						friend_id: self.friend_id
					});
					if(res.statusCode === 200){
						var data = res.data;
						if (data.code == 1) {
							self.plusNum = data.data.plusNum;
							self.watercss = true;
							self.wateroff = false;
							setTimeout(() => {
								self.waterdom = true;
							}, 1500);
							
							setTimeout(() => {
								self.userInfo.red_point = self.userInfo.red_point+self.plusNum
								self.pluss = true;
								self.treemove = true;
								self.movetree = false;
							}, 2000);
							
							setTimeout(() => {
								self.waterdom = false;
								self.movetree = true;
							}, 3500);
							
							setTimeout(() => {
								self.pluss = false;
								self.wateroff = true;
								self.watercss = false;
								self.treemove = false;
							}, 4000);	
						}
					}
				};
			},
			async retrievalData() {
				var self = this
				this.$api.sendRequest({
					url: '/api/Watering/wateringRetrievalInfo',
					data: {
						friend_id: self.friend_id
					},
					success: res => {
						if (res.code == 0) {
							self.getAward()
							self.userInfo 	= res.data
							if (self.userInfo.headimg) {
								self.userHeadimg = self.userInfo.headimg + '?x-oss-process=image/resize,m_fill,h_100,w_100'
							}else{
								self.userHeadimg = '/static/img/logo.png'
							}
						}
					}
				});
				
			},
			async getAward() {
				var self = this
				this.$api.sendRequest({
					url: '/api/Watering/wateringGetAward',
					data: {
						friend_id: self.friend_id
					},
					success: res => {
						if (res.code == 0) {
							self.cloudBall = self.setPosition(res.data)
						}
					}
				});
			},
			//点击树的动画
			tree() {
				if(this.movetree) {
					this.treemove = true;
					this.movetree = false;
					setTimeout(() => {
						this.movetree = true;
						this.treemove = false;
					}, 1000);
				};
			}
		}
	};
</script>

<style>
	.canvas{position: relative; display: flex; flex-direction: column; width: 750rpx; height: 702rpx; background-image: url('~@/static/watering/bg.jpg'); background-size: contain; overflow: hidden;}
	.canvas .chicken{ position: absolute; bottom: 100rpx; right:160rpx;width: 80rpx; height: 80rpx; z-index: 999;}
	.canvas .chicken image{ width: 100%; height: 100%;}
	.canvas .cloud { margin-top: 128rpx; }
	.canvas .cloud view{ margin: 40rpx 0; }
	.canvas .cloud view image{ width: 100%; height: 100%;}
	.canvas .cloud .fly-1{ width: 102rpx; height: 68rpx; animation: cloud-1 80s ease-in-out 0s infinite alternate; }
	.canvas .cloud .fly-2{ width: 72rpx; height: 52rpx; animation: cloud-2 60s linear 0s infinite alternate; }
	.canvas .cloud .fly-3{ width: 78rpx; height: 56rpx; animation: cloud-3 70s ease 0s infinite alternate;}
	
	.canvas .tree{ position: relative; display: flex; flex-direction: row; height: 160rpx; justify-content: center;}
	.canvas .tree image{ position: absolute; bottom: 0; width: 280rpx; height: 380rpx;}
	.canvas .tree .tree-1{ width: 124rpx; height: 264rpx;}
	.canvas .tree .tree-3{ width: 420rpx; height: 460rpx;}
	
	.canvas .sumup{ position: absolute; bottom: 26rpx; display: flex; flex-direction: row; justify-content: space-between; width: 100%; }
	.canvas .sumup .user{ display: flex; flex-direction: row;}
	.canvas .sumup .user .cover{ padding: 20rpx 20rpx 0;}
	.canvas .sumup .user .cover image{ width: 80rpx; height: 80rpx; border-radius: 50%;}
	
	.canvas .sumup .user .info{ display: flex; flex-direction: column; color: white; justify-content: flex-start; padding-top: 16rpx; font-weight: bold; text-shadow: 4rpx 4rpx 2rpx #085828;}
	.canvas .sumup .user .info .name{ font-size: 30rpx; color: white;}
	.canvas .sumup .user .info .name .is-real{ width: 25rpx; height: 25rpx; background-size: contain;}
	.canvas .sumup .user .info .name view{ margin-left: 12rpx; display: inline-block; vertical-align: middle;}
	.canvas .sumup .user .info .drop{line-height: 32rpx; font-size: 26rpx;color: #FFFFFF;}
	.canvas .sumup .user .info .drop .icon{ position: relative; display: inline-block; margin-left: 10rpx; width: 20rpx; height: 30rpx; vertical-align: bottom; background: url('~@/static/watering/water.png') no-repeat bottom right; background-size: contain;}
	.canvas .sumup .user .info .drop .plus{ position: absolute; top: 0rpx; right: -12rpx; font-size: 32rpx; opacity: 0; color: #ffbe2d;}
	
	.canvas .sumup .speed{ display: flex; position: relative; flex-direction: row; width: 95rpx; height: 70rpx;align-items: flex-end;margin-right: 20rpx;}
	.canvas .sumup .speed image{ position: absolute;}
	.canvas .sumup .speed .kettls{ top: 0rpx; right: 0rpx; width: 266rpx; height: 112rpx; transition: all 2s;}
	.canvas .sumup .speed .flasks{ top: -176rpx; right: 28rpx; width: 113rpx; height: 70rpx; transition: all 2s;}
	.canvas .sumup .speed .flasms{ top: -5rpx; right: 5rpx; width: 117rpx; height: 75rpx; transition: all 2s;}
	.canvas .sumup .speed .waters{ top: -240rpx; right: 316rpx; width: 85rpx; height: 150rpx; transition: all 2s;}
	
	
	
	@keyframes cloud-1{
		0%   { opacity: .8; transform: translate3d(200%, 0, 0);}
		50%  { opacity: .6; transform: translate3d(800%, 0, 0) scale(1.3);}
		100% { opacity: .8; transform: translate3d(-120%, 0, 0);}
	}
	@keyframes cloud-2{
		0%   { opacity: .8; transform: translate3d(820%, 0, 0);}
		50%  { opacity: .6; transform: translate3d(-120%, 0, 0);}
		100% { opacity: .8; transform: translate3d(1080%, 0, 0) scale(1.3);}
	}
	@keyframes cloud-3{
		0%   { opacity: .6; transform: translate3d(-120%, 0, 0) scale(1.3);}
		100% { opacity: .8; transform: translate3d(1000%, 0, 0);}
	}
	
	@keyframes move-1{
		0%{height: 268rpx;}
		10%{height: 280rpx;}
		20%{height: 295rpx;}
		40%{height: 275rpx;}
		70%{height: 285rpx;}
		100%{height: 264rpx;}
	} .move-1{ animation: move-1 1s; }
	
	@keyframes move-2{
		0%{height: 385rpx;}
		10%{height: 390rpx;}
		20%{height: 400rpx;}
		40%{height: 380rpx;}
		70%{height: 395rpx;}
		100%{height: 380rpx;}
	} .move-2{ animation: move-2 1s; }
	
	@keyframes move-3{
		0%{height: 475rpx;}
		10%{height: 490rpx;}
		20%{height: 500rpx;}
		40%{height: 470rpx;}
		70%{height: 490rpx;}
		100%{height: 460rpx;}
	} .move-3{ animation: move-3 1s; }
	
	@keyframes water{
		0%  { opacity: .5;transform: translate3d(0, 0, 0);}
		20% { opacity: 1; transform: translate3d(-150rpx, -90rpx, 0) scale(1.5);}
		30% { opacity: 1; transform: translate3d(-150rpx, -90rpx, 0) scale(1.5) rotate(-35deg);}
		80% { opacity: 1; transform: translate3d(-150rpx, -90rpx, 0) scale(1.5) rotate(-35deg);}
		100%{ opacity: 0;transform: translate3d(-150rpx, -90rpx, 0) scale(1.5) rotate(0deg);}
	} .water{ animation: water 4s ease-in-out forwards;}
	
	@keyframes pluss{
		0%{opacity: 0.8; top: -10rpx;}
		80%{opacity: 1;top: -80rpx;}
		100%{opacity: 0;top: -120rpx;}
	} .pluss{animation: pluss 2s;}
	
	
	
	/* 浮动按钮 */
	.canvas .tree .energy {
		width: 100rpx;
		height: 110rpx;
		margin: 0px;
		padding: 0px;
		position: absolute;
		color: #39b54a;
		text-align: center;
		animation: cloud 1.667s linear infinite;
		z-index: 99;
	}
	
	/* 浮动图片 */
	.canvas .tree .energy .ball {
		position: unset;
		border-radius: 50%;
		width: 70rpx;
		height: 70rpx;
		opacity: 0.9;
	}
	
	.canvas .tree .energy .green-txt {
		position: absolute;
		width: 100%;
		left: 0;
		top: 20%;
		font-size: 22rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
	}
	
	.canvas .tree .energy .green-info {
		display: block;
		text-align: center;
		width: 100%;
		font-size: 20rpx;
		height: 20rpx;
		line-height: 20rpx;
	}
	
	
	.canvas .tree .energyhide {
		display: none;
		animation: hide 0.5s linear forwards 1;
	}
	
	@-webkit-keyframes cloud {
		0% {
			transform: translateY(0);
		}
	
		50% {
			transform: translateY(8rpx);
		}
	
		100% {
			transform: translateY(0);
		}
	}
	
	@keyframes cloud {
		0% {
			transform: translateY(0);
		}
	
		50% {
			transform: translateY(8rpx);
		}
	
		100% {
			transform: translateY(0);
		}
	}
</style>